<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-demos</title>

    <style>
        canvas {
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>

<body>
<canvas id="cont" width="500px" height="500px">浏览器不支持</canvas>
<!--只能使用原生的js,如果让canvas左右居中使用display:block-->
<script>
    // 固定start获取画布
    const canvas = document.querySelector('#cont')
    // 获取画布上下文
    const ctx = canvas.getContext('2d')
    // 固定end

    // 创建一个图片
    const img = new Image()
    img.src = 'xiaobao.jpg'
    img.onload = function () {
        ctx.drawImage(img, 0, 0)
        // 获取图片宽高
        const width = img.width
        const height = img.height
        const copy1 = ctx.getImageData(0, 0, width, height)

        // 清除画布
        ctx.clearRect(0, 0, width, height)
        // 控制取点间隔
        const leap = 2
        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x += leap) {
                const index = x + y * width // 像素索引
                // 获取像素的rgba值
                const r = copy1.data[index * 4]
                const g = copy1.data[index * 4 + 1]
                const b = copy1.data[index * 4 + 2]
                const a = copy1.data[index * 4 + 3]
                // 通过a的值来过滤掉无效像素点
                if (a > 128) {
                    // 在当前有效的像素点上,画一个圆
                    drawCircle(x, y, 1, '#00f')
                }
            }
        }

    }

    /**
     * 画实心小球
     * @param x
     * @param y
     * @param r
     * @param color
     */
    function drawCircle(x, y, r, color = '#000') {
        ctx.beginPath()
        ctx.arc(x, y, r, 0, Math.PI * 2, true)
        ctx.fillStyle = color
        ctx.fill()
    }

    /**
     * 画文字
     * @param text
     * @param x
     * @param y
     */
    function drawText(text, x, y) {
        ctx.font = '100px 微软雅黑'
        ctx.fillStyle = '#000'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(text, x, y)
    }
</script>
</body>
</html>
